JavaScript Nullish Coalescing: Varsayılan Değer Ataması İçin Kapsamlı Bir Kılavuz

JavaScript'te varsayılan değerler atamak yaygın bir görevdir. Geleneksel olarak, geliştiriciler bu amaçla VEYA operatörünü (||) kullanmışlardır. Ancak, ECMAScript 2020'de tanıtılan nullish coalescing operatörü (??), özellikle null veya undefined değerlerle uğraşırken varsayılan değer atamalarını yönetmek için daha kesin ve güvenilir bir yol sunar. Bu kılavuz, nullish coalescing operatörünü derinlemesine inceler; sözdizimini, davranışını, VEYA operatöründen farklarını ve pratik kullanım alanlarını araştırır.

Nullish Coalescing Nedir?

Nullish coalescing operatörü (??), sol tarafındaki işlenen null veya undefined olduğunda sağ tarafındaki işleneni döndüren mantıksal bir operatördür. Aksi takdirde, sol tarafındaki işleneni döndürür. Daha basit bir ifadeyle, yalnızca bir değişken kesinlikle null veya undefined olduğunda bir varsayılan değer sağlar.

Sözdizimi

Nullish coalescing operatörünün sözdizimi oldukça basittir:

leftOperand ?? rightOperand

Burada, leftOperand null veya undefined olup olmadığını kontrol etmek istediğiniz değişken veya ifadedir ve rightOperand ise leftOperand'in gerçekten null veya undefined olması durumunda atamak istediğiniz varsayılan değerdir.

Örnek

Aşağıdaki örneği inceleyelim:

const username = null ?? "Guest";
console.log(username); // Çıktı: Guest

const age = undefined ?? 25;
console.log(age); // Çıktı: 25

const city = "London" ?? "Unknown";
console.log(city); // Çıktı: London

Bu örnekte, username başlangıçta null olduğu için varsayılan "Guest" değeri atanır. Benzer şekilde, age başlangıçta undefined olduğu için 25 değeri atanır. Ancak, city ne null ne de undefined olduğu için orijinal değeri olan "London"ı korur.

Nullish ve Falsy Değerler

JavaScript'te nullish ve falsy değerler arasındaki farkı anlamak çok önemlidir. Bir nullish değer ya null ya da undefined'dır. Bir falsy değer ise Boolean bir bağlamda karşılaşıldığında false olarak kabul edilen bir değerdir. Falsy değerler şunları içerir:

• null
• undefined
• 0 (sıfır)
• NaN (Sayı Değil)
• '' (boş dize)
• false

Temel ayrım, nullish coalescing operatörünün yalnızca null veya undefined'ı kontrol etmesi, VEYA operatörünün (||) ise herhangi bir falsy değeri kontrol etmesidir.

?? ile || Arasındaki Fark

VEYA operatörü (||), sol tarafındaki işlenen falsy ise sağ tarafındaki işleneni döndüren mantıksal bir VEYA operatörüdür. Varsayılan değerler atamak için kullanılabilse de, 0 veya boş bir dize gibi değerlerle uğraşırken beklenmedik davranışlara yol açabilir.

Örnek: || Operatörünün Tuzakları

const quantity = 0 || 10; // Miktar eksikse varsayılan olarak 10 atamak istiyoruz
console.log(quantity); // Çıktı: 10 (Beklenmedik!) çünkü 0 falsy bir değerdir

const text = '' || 'Default Text'; //Metin eksikse varsayılan bir metin atamak istiyoruz
console.log(text); // Çıktı: Default Text (Beklenmedik!) çünkü '' falsy bir değerdir

İlk örnekte, varsayılan 10 miktarını yalnızca quantity eksik (null veya undefined) olduğunda atamak istiyorduk. Ancak, 0 falsy bir değer olduğu için VEYA operatörü varsayılan değeri yanlış bir şekilde atadı. Benzer şekilde, boş dize, dize var olsa bile (ama boş olsa da) varsayılan metnin gösterilmesine neden olur.

Hassasiyet için ?? Kullanımı

Önceki örneği nullish coalescing operatörünü kullanarak yeniden yazalım:

const quantity = 0 ?? 10;
console.log(quantity); // Çıktı: 0 (Doğru!)

const text = '' ?? 'Default Text';
console.log(text); // Çıktı: '' (Doğru!)

Şimdi, çıktı beklendiği gibi. Nullish coalescing operatörü yalnızca null veya undefined'ı kontrol eder, bu nedenle 0 ve '' geçerli değerler olarak kabul edilir ve orijinal değerleri korunur.

Nullish Coalescing için Kullanım Alanları

Nullish coalescing operatörü, yalnızca bir değişkenin kesinlikle null veya undefined olduğu durumlarda varsayılan değerler sağlamanız gereken çeşitli senaryolarda kullanışlıdır. İşte bazı yaygın kullanım alanları:

1. İsteğe Bağlı Fonksiyon Parametrelerini Yönetme

İsteğe bağlı parametrelere sahip bir fonksiyon tanımlarken, parametreler sağlanmazsa varsayılan değerler sağlamak için nullish coalescing operatörünü kullanabilirsiniz.

function greet(name, greeting) {
  const userName = name ?? "User";
  const userGreeting = greeting ?? "Hello";
  console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Çıktı: Hello, User!
greet("Alice"); // Çıktı: Hello, Alice!
greet("Bob", "Greetings"); // Çıktı: Greetings, Bob!

2. Varsayılan Yapılandırma Seçeneklerini Ayarlama

Yapılandırma nesneleriyle çalışırken, belirli yapılandırma seçenekleri belirtilmemişse varsayılan değerlerin kullanılmasını sağlamak için nullish coalescing operatörünü kullanabilirsiniz.

const config = {
  timeout: 5000,
  retries: 3
};

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // 10 saniyelik varsayılan zaman aşımı
  const retries = options.retries ?? 5; // Varsayılan 5 yeniden deneme
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Çıktı: Timeout: 5000, Retries: 3
fetchData({}); // Çıktı: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Çıktı: Timeout: 10000, Retries: 5

3. İç İçe Nesne Özelliklerine Erişme

İç içe nesnelerin özelliklerine erişirken, ara özelliklerden herhangi biri null veya undefined ise varsayılan değerler sağlamak için nullish coalescing operatörü isteğe bağlı zincirleme (?.) ile birleştirilebilir.

const user = {
  profile: {
    address: {
      city: "New York"
    }
  }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Çıktı: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Çıktı: Unknown

4. API'ler ve Harici Verilerle Çalışma

API'lerden veya harici kaynaklardan veri çekerken, belirli veri alanları eksikse veya null ya da undefined değerlere sahipse varsayılan değerler sağlamak için nullish coalescing operatörü kullanılabilir. Farklı bölgelerden kullanıcı verileri almayı düşünün. Bazı bölgelerin kullanıcı verilerine `country` alanını dahil etmeyebileceğini varsayalım.

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    const data = await response.json();
    const country = data.country ?? "Unknown Country";
    const timezone = data.timezone ?? "UTC";
    console.log(`User is from: ${country}, Timezone: ${timezone}`);
  } catch (error) {
    console.error("Error fetching user data:", error);
  }
}

// Farklı API yanıtlarını simüle etme:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Bunu test etmek için gerçek bir API'ye veya sahte bir fetch'e ihtiyacınız olurdu.
// Gösterim amacıyla, yanıtları simüle edelim:
global.fetch = async (url) => {
    if (url.includes("123")) {
        return { json: async () => userWithCountry };
    } else if (url.includes("456")) {
        return { json: async () => userWithoutCountry };
    }
    throw new Error("Unexpected URL");
};

getUserData(123); // Çıktı: User is from: USA, Timezone: EST
getUserData(456); // Çıktı: User is from: Unknown Country, Timezone: GMT

Operatör Önceliği

Nullish coalescing operatörünün nispeten düşük bir operatör önceliği vardır. VEYA (||) ve VE (&&) operatörlerinden daha düşüktür. Bu nedenle, nullish coalescing operatörünü diğer mantıksal operatörlerle birleştirirken, işlem sırasını açıkça belirtmek için parantez kullanmak çok önemlidir. Bunu yapmamak sözdizimi hatalarına veya beklenmedik davranışlara neden olabilir.

Örnek: Anlaşılırlık için Parantez Kullanımı

// Parantez olmadan (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Parantez ile (Doğru)
const result = false || (null ?? "Default");
console.log(result); // Çıktı: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Çıktı: null

İlk örnekte, parantez eksikliği bir SyntaxError ile sonuçlanır çünkü JavaScript motoru amaçlanan işlem sırasını belirleyemez. Parantez ekleyerek, motora önce nullish coalescing operatörünü değerlendirmesini açıkça söyleriz. İkinci örnek geçerlidir; ancak, çıktı farklıdır çünkü önce `||` ifadesi değerlendirilir.

Tarayıcı Uyumluluğu

Nullish coalescing operatörü (??) nispeten yeni bir özelliktir, bu nedenle özellikle eski tarayıcıları hedefliyorsanız tarayıcı uyumluluğunu göz önünde bulundurmak çok önemlidir. Çoğu modern tarayıcı, nullish coalescing operatörünü destekler, bunlar arasında:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

Daha eski tarayıcıları desteklemeniz gerekiyorsa, kodunuzu JavaScript'in uyumlu bir sürümüne dönüştürmek için Babel gibi bir transpiler kullanabilirsiniz. Babel, ?? operatörünü eski ortamlarda çalışan eşdeğer JavaScript koduna dönüştürecektir.

En İyi Uygulamalar

Nullish coalescing operatörünü etkili bir şekilde kullanmak için bazı en iyi uygulamalar şunlardır:

• ?? operatörünü nullish kontrolleri için kullanın: Yalnızca bir değişken null veya undefined olduğunda varsayılan bir değer sağlamak istediğinizde nullish coalescing operatörünü (??) kullanın.
• Karmaşık ifadeler için parantez kullanın: Nullish coalescing operatörünü diğer mantıksal operatörlerle birleştirirken, işlem sırasını net bir şekilde tanımlamak için parantez kullanın.
• Tarayıcı uyumluluğunu göz önünde bulundurun: Tarayıcı uyumluluğunu kontrol edin ve gerekirse eski tarayıcıları desteklemek için bir transpiler kullanın.
• Tutarlı bir şekilde kullanın: Proje genelinde daha öngörülebilir bir kodlama stili için uygun olan yerlerde ?? operatörünü benimseyin.
• İsteğe bağlı zincirleme ile birleştirin: İç içe nesnelerin özelliklerine güvenli bir şekilde erişmek ve varsayılan değerler atamak için ?? operatörünü isteğe bağlı zincirleme ?. ile birlikte kullanın.

Global Hususlar

Global bir kitle için geliştirme yaparken, varsayılan değer atamalarıyla ilgili aşağıdaki noktaları göz önünde bulundurun:

• Yerelleştirme: Varsayılan değerlerin kullanıcının diline veya bölgesine göre yerelleştirilmesi gerekebilir. Örneğin, varsayılan bir para birimi simgesi veya tarih formatı.
• Kültürel Normlar: Belirli varsayılan değerlerin kültürel normlara göre ayarlanması gerekebilir. Örneğin, varsayılan bir selamlama mesajı farklı kültürlerde farklı olabilir.
• Erişilebilirlik: Varsayılan değerlerin engelli kullanıcılar için erişilebilir ve anlaşılır olduğundan emin olun. Kullanıcı arayüzlerinde varsayılan değerler için açık ve açıklayıcı etiketler sağlayın.
• Zaman Dilimleri ve Tarihler: Tarihler ve saatlerle çalışırken, varsayılan değerlerin farklı bölgelerdeki kullanıcılara doğru şekilde gösterilmesini sağlamak için uygun zaman dilimlerini ve tarih formatlarını kullanın.

Örnek: Nullish Coalescing ile Yerelleştirme

Kullanıcının yerel ayarına göre farklı dillerde varsayılan bir hoş geldiniz mesajı göstermek istediğinizi varsayalım. Yerelleştirilmiş bir mesaj mevcut değilse varsayılan bir mesaj sağlamak için nullish coalescing operatörünü kullanabilirsiniz.

function getWelcomeMessage(locale) {
  const localizedMessages = {
    en: "Welcome!",
    fr: "Bienvenue !",
    de: "Willkommen!"
  };

  const message = localizedMessages[locale] ?? "Welcome!"; // Yerel ayar bulunamazsa varsayılan olarak İngilizce
  return message;
}

console.log(getWelcomeMessage("fr")); // Çıktı: Bienvenue !
console.log(getWelcomeMessage("es")); // Çıktı: Welcome! (Varsayılan olarak İngilizce'ye dönüyor)

Sonuç

Nullish coalescing operatörü (??), JavaScript diline değerli bir ektir. VEYA operatörüne (||) kıyasla, özellikle 0 veya boş dizeler gibi değerlerle uğraşırken varsayılan değerler atamak için daha kesin ve güvenilir bir yol sunar. Sözdizimini, davranışını ve kullanım alanlarını anlayarak, varsayılan değer atamalarını doğru bir şekilde yöneten daha temiz, daha sürdürülebilir kod yazabilirsiniz. Projelerinizde nullish coalescing operatörünü kullanırken tarayıcı uyumluluğunu, operatör önceliğini ve global hususları göz önünde bulundurmayı unutmayın.

Bu kılavuzda belirtilen en iyi uygulamaları takip ederek, JavaScript kodunuzun kalitesini ve güvenilirliğini artırmak için nullish coalescing operatöründen etkili bir şekilde yararlanabilir, kodunuzu daha sağlam ve anlaşılır hale getirebilirsiniz. Kodunuzda her zaman açıklığı ve sürdürülebilirliği önceliklendirmeyi unutmayın; nullish coalescing operatörü bu hedeflere ulaşmada güçlü bir araç olabilir.